<template>
  <div class="detail">
    <div class="title">空气质量</div>
    <div class="main">
      <div class="aqi">{{ air.aqi }}</div>
      <div class="quality">{{ airText.quality }}</div>
      <div class="word">{{ airText.word }}</div>
      <div class="advise">{{ airText.advise }}</div>
    </div>
    <div class="value">
      <el-row>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.pm25" text="PM2.5" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.pm10" text="PM10" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.o3" text="O3" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.co" text="CO" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.so2" text="SO2" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.no2" text="NO2" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import AirContent from "@/components/main/air-content.vue";

const props = defineProps({
  air: {
    type: Object,
  },
  airText: {
    type: Object,
  },
});
</script>

<style lang="less" scoped>
.detail {
  border-radius: 16px;
  background-color: #eff1f7;
  border: 1px solid #f2f4fa;
  .title {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    margin-bottom: 28px;
  }
  .main {
    padding: 0 16px;
    text-align: center;
    .aqi {
      font-size: 50px;
      font-weight: 700;
    }
    .quality {
      font-size: 20px;
      margin-top: 7px;
    }
    .word {
      margin-top: 7px;
      font-size: 18px;
    }
    .advise {
      font-size: 15px;
      margin-top: 12px;
      color: rgba(0, 0, 0, 0.5);
    }
  }
  .value {
    margin: 20px 28px 15px;
    padding: 10px 0;
    border-radius: 16px;
    background-color: #fffefe;
  }
}
</style>